<template>
  <view>
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">肌肉耐力</block>
    </cu-custom>
    <view class="contents u-f-ajc u-f-column">
      <view>卷腹</view>
      <view class="u-f-ac u-f-jsa" style="margin: 150rpx 0;width: 100%;">
        <view class="items u-f-ajc u-f-column" v-for="(item, index) in list" :key="index" :class="item.isActive ? 'actives' : ''"
          :style="{'backgroundColor': item.color}">
          {{item.title}}
        </view>
      </view>
      
      <view class="items2 u-f-ajc u-f-column">
        <view style="margin-bottom: 50rpx;">测试值</view>
        <view class="inputs">
          <input type="text" v-model="input" placeholder="个" class="t-a-c" />
        </view>
      </view>

      <view class="start u-f-ajc">
        <view class="u-f-ajc" @click="start">{{isStart ? '完成' : '启动'}}</view>
      </view>
      
      <view @click="confirm" v-if="isButton" style="position: fixed;bottom: 50rpx;left: 10%; z-index: 99; width: 80%;height: 80upx;line-height: 80upx;text-align: center;background-color: #39BB9E;color: #fff;font-size: 32upx;border-radius: 10rpx;">
        保存
      </view>
    </view>
  </view>
</template>

<script>
  let colorTimer;

  export default {
    data() {
      return {
        currentIndex: 0,
        list: [{
            title: '1',
            color: '#E55044',
            isActive: true,
          },
          {
            title: '2',
            color: '#F5A604',
            isActive: false,
          },
        ],
        input: '',
        isStart: false,
        isButton: false,
      }
    },
    watch: {
      input(newVal) {
        if (this.input) this.isButton = true
      }
    },
    methods: {
      start() {
        this.isStart = !this.isStart
        if (this.isStart) {
          colorTimer = setInterval(() => {
            this.currentIndex += 1
            if (this.currentIndex > 1) this.currentIndex = 0
            this.list.forEach(item => item.isActive = false)
            this.list[this.currentIndex].isActive = true
            if (this.list[0].isActive) this.input = Number(this.input) + 1
          }, 2800)
        } else {
          clearInterval(colorTimer)
          this.isStart = false
        }
      },
      goPage() {
        let url = `../add_assessment`;
        uni.redirectTo({
          url
        })
      },
      confirm() {
        let objs = uni.getStorageSync('fmsDetails2')
        let list = {
          list: this.list,
          input: this.input
        }
        objs.list5 = list
        uni.setStorageSync('fmsDetails2', objs)
        this.goPage();
      },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #4B505F !important;
  }

  .contents {
    padding: 30rpx;
    color: #FFFFFF;
  }

  .items {
    width: 100rpx;
    height: 100rpx;
    border-radius: 100%;
    font-size: 60rpx;
  }

  .actives {
    // width: 160rpx;
    // height: 160rpx;
    transform: scale(1.6, 1.6);
    transition: all 600ms linear 0s;
  }
  
  .items2 {
    width: 44%;
    height: 300rpx;
    box-sizing: border-box;
    padding: 0 30rpx;
    font-size: 30rpx;
  
    .inputs {
      width: 100%;
      border-bottom: 1px solid #636875;
      padding-bottom: 10rpx;
      color: $uni-color-zhuti;
    }
  }

  .start {
    width: 130rpx;
    height: 130rpx;
    margin-top: 30rpx;
    border-radius: 100%;
    border: 2px solid $uni-color-zhuti;
    padding: 6rpx;

    view {
      background-color: $uni-color-zhuti;
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
  }
  
</style>
